<template>
  <div class="container">
    <el-dialog :visible="isShow" :title="title" width="400px" @close="HandleOff">
      <el-form ref="form" :model="ruleForm" label-width="80px" size="small" :rules="rules">
        <el-form-item label="学科名称" prop="subjectName">
          <el-input
            v-model="ruleForm.subjectName"
            placeholder="请输入学科名称"
          ></el-input>
        </el-form-item>
        <el-form-item label="是否显示">
          <el-switch
            v-model="ruleForm.isFrontDisplay"
            active-color="#13ce66"
            inactive-color="#ff4949"
            :active-value=1
            :inactive-value=0
          >
          </el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="HandleOff">取消</el-button>
        <el-button type="primary" @click="HandleFn">确认</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { add, update } from '@/api/hmmm/subjects.js'
export default {
  name: 'subjectadd',
  props: {
    isShow: {
      type: Boolean,
      default: false
    },
    List: {
      type: Array,
      required: false
    }

  },
  computed: {
    title () {
      return this.ruleForm.id ? '修改学科' : '添加学科'
    }
  },
  data () {
    return {
      ruleForm: {
        subjectName: '',
        isFrontDisplay: 1
      },
      rules: {
        subjectName: [
          { required: true, message: '请输入学科名称', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    // 关闭弹框
    HandleOff () {
      this.$emit('update:isShow', false)
      this.$refs.form.resetFields()
      this.ruleForm = {
        subjectName: '',
        isFrontDisplay: true
      }
    },
    // 确认按钮
    HandleFn () {
      this.$refs.form.validate(async (falg) => {
        if (!falg) return
        if (!this.ruleForm.id) {
          await add(this.ruleForm)
          this.$message.success('新增学科成功')
        } else {
          const res = await update(this.ruleForm)
          console.log(res)
          this.$message.success('修改学科成功')
        }
        this.HandleOff()
        this.$emit('add-handel')
      })
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-dialog__footer{
  text-align: right;
}
</style>
